<template>
  <div class="frame">
    <el-dialog
      :title="this.$t('h.importEthWallet')"
      :visible.sync="showIn"
      width="500px"
      :before-close="closeFrame"
    >
      <div class="header">
        <ul>
          <li :class="{active:state===0}" @click="changeState(0)">{{$t("h.importethKey")}}</li>
          <li :class="{active:state===1}" @click="changeState(1)">{{$t("h.memoryWord")}}</li>
        </ul>
      </div>
      <div class="content">
        <textarea id="privateKey" v-model="privateKey" v-if="state===0" :placeholder="this.$t('h.importKeyPlaceholder')"></textarea>
        <textarea id="mnemonics" readonly="readonly" v-model="mnemonics" v-if="state===1" :placeholder="this.$t('h.inMemoryWord')"></textarea>
        <p>{{$t("h.password")}}</p>
        <input v-model="password" type="password" :placeholder="this.$t('h.inExchangePassword')">
      </div>
      <div class="foot">
        <button @click="add()">{{$t("h.import")}}</button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import {addEthAccount, generateSeed, getPrivateKeyByCode} from '../service/ethService'
  import {validateSecret} from '../utils/commonUtils'

  export default {
    data() {
      return {
        showIn: true,
        state: 0,
        mnemonics: '', //助记词
        privateKey: '', //私钥
        password: '', //密码
      }
    },
    methods: {
      // 转入
      closeFrame() {
        this.$emit('listenImporteth', false, 'close')
      },
      // 切换导入私钥与助记词
      changeState(val) {
        this.state = val;
        if (val === 0) {
          this.privateKey = ''
        } else {
          this.mnemonics = generateSeed();
          this.privateKey = getPrivateKeyByCode(this.mnemonics)
        }
      },
      // 导入
      add() {
        if(validateSecret(this.password)){
          let obj = addEthAccount(this.privateKey, this.password)
          console.log(obj)
          if (!obj) {
            this.$emit('listenImporteth', false, 'success')
          } else {
            // this.$message.error('obj');
            this.$emit('listenImporteth', false, 'fail')
          }
        }else {
          this.$message.error("密码错误")
        }

      }

    }
  }
</script>
<style lang="less" scoped>
  .frame {
    padding: 0 20px;
    .header {
      /*margin-top: 30px;*/
      ul {
        list-style: none;
        padding: 0 20px;
        display: flex;
        background-color: #eaedf5;
        li {
          margin-right: 30px;
          padding: 2px 0;
          cursor: pointer;
        }
        .active {
          border-bottom: 2px solid #98889b;
          color: #98889b;
        }
      }
    }
    #mnemonics{
      font-size: 22px;
    }
    #privateKey{
      font-size: 22px;
    }
    .content {
      margin: 20px 0;
      padding: 0 20px;
      textarea {
        width: 100%;
        height: 80px;
        opacity: 0.5;
        border: solid 1px #e0e0e0;
      }
      p {
        padding: 10px 0;
      }
      input {
        padding: 0 5px;
        height: 34px;
        width: 100%;
        border: solid 1px #e0e0e0;
      }
    }
    .foot {
      margin: 30px 0;
      padding: 0 20px;
      button {
        border-radius: 4px;
        border: none;
        background-color: #98889b;
        width: 100%;
        height: 41px;
        font-size: 14px;
        color: #fff;
        cursor: pointer;
      }
    }
  }

</style>
<style lang="less">
  .frame {
    .el-dialog__wrapper {
      .el-dialog {
        border-radius: 8px;
      }
      .el-dialog__header {
        border-bottom: 1px solid #eaedf5;
        color: #000000;
        font-size: 18px;
        font-weight: bold;
        padding: 20px;
      }
      .el-dialog__body {
        padding: 30px 0;
      }
      .el-dialog__headerbtn .el-dialog__close {
        color: #666666;

      }
    }
  }
</style>


